<template>
  <div>
    <div v-if="shows == 'list'">
      <Header>
        <el-button size="small" type="primary" @click="add">新建拼团</el-button>
      </Header>
      <Header :type="'screening'" @tag="getList" @reset="reset">
        <div class="head-tit">
          内容筛选
        </div>
        <div class="head-operation">
          <span class="head-label">
            活动名称：
          </span>
          <el-input
            v-model="searchName"
            placeholder="请输入名称"
            size="small"
            class="head-input"
          >
          </el-input>
          <span class="head-label">
            选择状态：
          </span>
          <el-select
            v-model="selectVal"
            placeholder="请选择"
            size="small"
            class="head-input"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="head-operation">
          <span class="head-label">
            选择时间：
          </span>
          <div class="head-time">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              style="width:100%"
            >
            </el-date-picker>
          </div>
        </div>
      </Header>
      <Main :data="listData" :footer-lock="totals > 10">
        <el-table-column
          label="活动名称"
          align="center"
          property="name"
        ></el-table-column>
        <el-table-column label="活动封面" align="center">
          <template slot-scope="scope">
            <img
              :src="$store.state.qiniu + scope.row.pic + $store.state.imgRotate"
              width="80px"
            />
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1" style="color:#909399;">
              未开始
            </span>
            <span v-if="scope.row.status == 2" style="color:#67C23A;">
              进行中
            </span>
            <span v-if="scope.row.status == 3" style="color:#F56C6C;">
              结束
            </span>
          </template>
        </el-table-column>
        <el-table-column label="活动时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.stime }} 至 {{ scope.row.etime }}
          </template>
        </el-table-column>
        <el-table-column
          label="活动商品（件）"
          align="center"
          property="goods"
        ></el-table-column>
        <el-table-column
          label="商品浏览量"
          align="center"
          property="brows"
        ></el-table-column>
        <el-table-column
          label="成团数"
          align="center"
          property="success"
        ></el-table-column>
        <el-table-column
          label="支付单数"
          align="center"
          property="pay"
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="msg(scope.row)">
              编辑活动
            </el-button>
            <el-button
              v-if="scope.row.status == 1"
              size="mini"
              type="text"
              @click="activityTag('start', scope.row.assemble_id)"
            >
              立即开始
            </el-button>
            <el-button
              v-if="scope.row.status == 2"
              size="mini"
              type="text"
              @click="activityTag('end', scope.row.assemble_id)"
            >
              立即结束
            </el-button>
            <el-button
              v-if="scope.row.status == 3"
              size="mini"
              type="text"
              @click="activityTag('delete', scope.row.assemble_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <Form v-if="shows == 'add'" :data-val="dataVal" @out="out" />
  </div>
</template>
<script>
import { ASSEMBLELIST, STARTIMMEDIATELY } from "../service";

export default {
  components: {
    Form: () => import("./form")
  },
  data() {
    return {
      listData: [],
      options: [
        { label: "全部", value: 0 },
        { label: "未开始", value: 1 },
        { label: "进行中", value: 2 },
        { label: "已结束", value: 3 }
      ],
      totals: 0,
      pages: 0,
      shows: "list",
      selectVal: 0,
      searchName: "",
      time: []
    };
  },

  created() {
    this.getList();
  },
  methods: {
    msg(e) {
      this.shows = "add";
      this.dataVal = e;
    },
    add() {
      this.shows = "add";
      this.dataVal = {};
    },
    out() {
      this.shows = "list";
      this.getList();
    },
    async activityTag(flag, id) {
      await STARTIMMEDIATELY({ assemble_id: id, flag }).then(
        ({ code, msg }) => {
          if (code === 200) {
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    reset() {
      this.searchName = "";
      this.selectVal = "";
      this.time = [];
      this.getList();
    },
    async getList() {
      await ASSEMBLELIST({
        page: this.pages,
        pageshow: 10,
        search: this.searchName,
        stime: this.time.length > 0 ? this.time[0] : "",
        etime: this.time.length > 0 ? this.time[1] : 0,
        status: this.selectVal
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
